<template>
    <div class="navbar">
         <div class="navbar__item" v-for="(item, index) in dataSource" :data-type="item.type" @click="getFilterList">
          {{item.title}}
         </div>
    </div>
</template>
<script>
export default {
    props: {
        dataSource: {
            required: true,
            type: Array
        }
    },
    data(){
        return {

        }
    },
    methods: {
        getFilterList(e){
            this.$emit('navBarClick', e)
        }
    }                                                                                                
}
</script>
<style lang="sass">
    $borderBotttom: 1px solid #e5e5e5;
    .navbar {
        display: flex;
        background: #fff;
        border-bottom: $borderBotttom;
    }
     .navbar .navbar__item {
         flex: 1;
         text-align: center;
         height: 2.5rem;
         line-height: 2.5rem;
     }

</style>
